<template>
  <div class="home-page">
    <van-search placeholder="搜索课程名称" v-model="searchText" show-action>
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image">
      </van-swipe-item>
    </van-swipe>
    <div class="navs">
      <div class="nav-item" v-for="item in navs" :key="item.classID" :item="item" @click="goodslist(item)"> 
        <img :src="item.imageUrl">
        <div class="nav-text">{{item.className}}</div>
      </div>
    </div>
    <div class="type-item">
      <van-cell title="真实列表" is-link value="查看全部" @click="queryAllProduct"/>
      <goods v-for="item in list" :key="item.productID" :item="item" @click="goods"></goods>
    </div>
    <!-- <div class="type-item">
      <van-cell title="免费开团" is-link value="查看全部" @click="link"/>
      <goods v-for="(item, index) in list" :key="index" :item="item"></goods>
    </div>
    <div class="type-item">
      <van-cell title="英语天地" is-link value="查看全部" @click="link"/>
      <goods v-for="(item, index) in list" :key="index" :item="item"></goods>
    </div>
    <div class="type-item">
      <van-cell title="数学奥数" is-link value="查看全部" @click="link"/>
      <goods v-for="(item, index) in list" :key="index" :item="item"></goods>
    </div>-->
    <tabbar :active="0"></tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import Goods from '@/components/Goods.vue'
import { navs, banners } from '@/api/config'
import { productList,productClassList } from '@/api'
import mixin from '@/mixin'
export default {
  name: 'home',
  mixins: [mixin],
  components: {
    Tabbar,
    Goods
  },
  data() {
    return {
      searchText: '',
      baseUrl: this.$store.state.BASE_URL,
      images: banners,
      navs: navs,
      list: []
    }
  },
  created() {
    if (this.$store.state.token) {
      this.getData()
    }
  },
  methods: {
    getData() {
      productList().then(res => {
        this.list = res
        console.log(res)
      })
      productClassList().then(res => {
        this.navs = res
        console.log(res)
      })
    },
    onSearch() {
      let searchTextValue = this.searchText;
 
      if(searchTextValue.length ==0 ){
        searchTextValue = "-1";
      } 
      let activeDate =  new Date().getTime()
      this.$router.push({
        path:`/goods-list-all/${searchTextValue}` ,
        query:{
          activeDate:activeDate
        }
      })
      //this.$router.push(`/goods-list-all/${searchTextValue}` ,query)
      
    },
    
    queryAllProduct() {
      let searchTextValue = this.searchText;
 
      searchTextValue = "-1";
    
      let activeDate =  new Date().getTime()
      this.$router.push({
        path:`/goods-list-all/${searchTextValue}` ,
        query:{
          activeDate:activeDate
        }
      })
      //this.$router.push(`/goods-list-all/${searchTextValue}` ,query)
      
    },
    
    goodslist(item) {
      console.log(6)
      console.log(item)
      console.log(item.className)
      console.log(6)
      this.$router.push(`/goods-list/${item.className}`)
    },
    goods(item) {
      console.log(5)
      console.log(item)
      console.log(5)
      this.$router.push(`/goods-detail/${item.productID}`)
    },
    link(path, id) {
      if (id) {
        this.$router.push(`${path}/${id}`)
      } else {
        this.$router.push(`${path}`)
      }
    }
  },
  watch: {
    '$store.state.token'() {
      this.getData()
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin'

.van-swipe img
  width 100vw
  height 37.3vw
  display block
.navs
  background #ffffff
  box-sizing border-box
  padding 20px 1.5vw 5px
  flex-around-wrap()
  .nav-item
    width 20vw
    text-align center
    margin-bottom 15px
  .nav-text
    font-size 14px
    line-height 14px
    margin-top 8px
  img
    width 10vw
    height 10vw
.type-item
  background #ffffff
  margin-top $part-width
</style>
